import { CSSProperties } from "react";
import { ElementNode } from "../components/ElementProvider/ElementList";
import { IContext } from "../context/ElementContext";

/*
 * @Author: hongbin
 * @Date: 2022-04-04 21:53:13
 * @LastEditors: hongbin
 * @LastEditTime: 2022-04-06 21:57:06
 * @Description:只使用本项目的帮助函数
 */
export {};

//TODO遍历key生成样式对象
/**
 * 生成预览模式组件样式
 */
export const geoPreviewStyles = (element: ElementNode, pageAxis: IContext["pageAxis"]): CSSProperties => {
  return {
    position: "absolute",
    width: element.style["width"] + element.unit["width"],
    height: element.style["height"] + element.unit["height"],
    left: `${
      (((window.bodyWidth / 100) * element.style.left - pageAxis.minX) / pageAxis.width) * 100 + element.unit["left"]
    }`,
    top: `${
      (((window.bodyHeight / 100) * element.style.top - pageAxis.minY) / pageAxis.height) * 100 + element.unit["top"]
    }`,
  };
};

/**
 * 生成开发模式组件样式
 */
export const geoDevStyles = (element: ElementNode, minX: number, minY: number): CSSProperties => {
  return {
    position: "absolute",
    width: element.style["width"] + element.unit["width"],
    height: element.style["height"] + element.unit["height"],
    left: `calc(${element.style.left + element.unit["left"]} - ${element.unit["left"] === "vw" ? minX : minY}px)`,
    top: `calc(${element.style.top + element.unit["top"]} - ${element.unit["top"] === "vw" ? minX : minY}px)`,
    transform: `scale(${window.scaleMultiple})`,
    transformOrigin: "top left",
  };
};
